<style lang="less">
@import './customTree.less';
</style>
<template>
  <div class="search">
    <Row>
      <Col span="6">
      <Tree ref="carTree"
            :data="carData"
            multiple
            show-checkbox
            :render="renderContent"
            :check-strictly="true"></Tree>
      </Col>
      <Col span="18">
      <div id="map"></div>
      </Col>
    </Row>
  </div>
</template>

<script>
import AMap from 'AMap'
import util from '@/libs/util.js'
export default {
  name: 'role-manage',
  data() {
    return {
      carData: [
        {
          title: '海南省',
          expand: true,
          children: [
            {
              title: '海口市',
              expand: true,
              children: [
                {
                  title: '鄂A99999'
                },
                {
                  title: '鄂A88888'
                }
              ]
            },
            {
              title: '三亚市',
              expand: true,
              children: [
                {
                  title: '鄂A77777'
                },
                {
                  title: '鄂A66666'
                }
              ]
            }
          ]
        }
      ]
    }
  },
  methods: {
    mapInit() {
      this.map = new AMap.Map('map', {
        resizeEnable: true,
        zoom: 5
      })
    },
    renderContent(h, { root, node, data }) {
      let icon = ''
      if (data.level == 0) {
        icon = 'ios-navigate'
      } else if (data.level == 1) {
        icon = 'md-list-box'
      } else if (data.level == 2) {
        icon = 'md-list'
      } else if (data.level == 3) {
        icon = 'md-radio-button-on'
      } else {
        icon = 'md-radio-button-off'
      }
      return h(
        'span',
        {
          style: {
            display: 'inline-block',
            cursor: 'pointer'
          },
          on: {
            click: () => {
              data.checked = !data.checked
            }
          }
        },
        [
          h('span', [
            h('Icon', {
              props: {
                type: icon,
                size: '16'
              },
              style: {
                'margin-right': '8px',
                'margin-bottom': '3px'
              }
            }),
            h('span', { class: 'ivu-tree-title' }, data.title)
          ])
        ]
      )
    }
  },
  mounted() {
    this.mapInit()
  }
}
</script>